<template>
  <div class="modal__container" v-show="status">
    <div class="modal__mask"></div>
    <div class="modal__box">
      <div class="title">温馨提示</div>
      <div class="content">{{content}}</div>
      <div class="btn__box">
        <div class="btn__default btn__mini" @click="confirm">确定</div>
        <div class="btn__default btn__mini" @click="cancel">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    status: {
      required: true,
      type: Boolean
    },
    content: {
      type: String,
      default: '123'
    }
  },
  methods: {
    confirm(){
      this.$emit('confirm');
    },
    cancel() {
      this.$emit('update:status', false);
    }
  },
}
</script>
<style lang="stylus" scoped>
.modal__container
  position fixed
  top 0
  left 0
  width 100%
  height 100%
.modal__mask
  position absolute
  background rgba(0, 0, 0, .7);
  top: 0
  left: 0
  width 100%
  height 100%
.modal__box
  width 400px
  height 200px
  background #fff;
  border-radius 6px;
  position absolute 
  top 50%
  left 50%
  transform translate(-50%, -50%)
  padding 30px 20px 10px
  box-sizing border-box
.title 
  font-size 22px
  text-align: center
.content
  font-size 14px
  margin 20px 0 30px;
.btn__box
  display flex
  justify-content center
.btn__mini
  margin: 0 10px
</style>
